src/components/mypage/ResumeFolder.tsx (3)

154-172: 중복 클릭/중복 요청 방지 및 접근성 개선(버튼 비활성화, aria-disabled).

뮤테이션 진행 중 추가 클릭을 무시하고, 버튼을 비활성화해 중복 트래픽과 상태 경합을 방지하세요.

-            <button type="button" onClick={clickBookmark}>
+            <button
+              type="button"
+              onClick={clickBookmark}
+              disabled={bookmarkMutation.isPending}
+              aria-disabled={bookmarkMutation.isPending}
+            >
@@
-            <button type="button" onClick={clickLike}>
+            <button
+              type="button"
+              onClick={clickLike}
+              disabled={likeMutation.isPending}
+              aria-disabled={likeMutation.isPending}
+            >

---

8-9: 미사용 코드/의존성 제거.

useLike/useBookmark와 postLike/postBookmark는 더 이상 사용되지 않습니다. 불필요한 의존성을 줄이세요.

-import { useLike } from '@/app/blog/_lib/useLike'
-import { useBookmark } from '@/app/blog/_lib/useBookmark'
@@
-  const { postLike } = useLike()
-  const { postBookmark } = useBookmark()

Also applies to: 32-33

---

67-74: TanStack Query의 onMutate/onError를 활용한 정석 낙관적 업데이트 고려.

현재 컴포넌트 내에서 낙관·롤백을 처리하고 있는데, 뮤테이션 훅에서 onMutate(스냅샷 반환)와 onError(스냅샷 복구)를 사용하면 관심사가 정리되고 중복 코드가 줄어듭니다. 필요 시 훅 리팩토링을 제안합니다.

원하시면 useResumeLikeMutation/useResumeBookmarkMutation에 낙관/롤백을 내장하는 패치도 제공하겠습니다.

Also applies to: 93-99

src/components/mypage/Resume.tsx (3)

59-71: setTimeout 기반 재조회는 불안정합니다(경합/지연 가능).

뮤테이션 훅에서 이미 invalidateQueries(resumeKeys.all)을 수행하므로, 여기서는 타이머 없이 refetch() 또는 별도 키 무효화로 일관되게 처리하는 편이 안전합니다. 타이머는 제거를 권장합니다.

-  const handleLikeUpdate = (resumeId: string, newLikeCount: number) => {
-    setTimeout(() => {
-      checkLike()
-      refetch()
-    }, 500)
-  }
+  const handleLikeUpdate = () => {
+    checkLike()
+    refetch()
+  }
@@
-  const handleBookmarkUpdate = (resumeId: string, newBookmarkCount: number) => {
-    setTimeout(() => {
-      checkBookmark()
-      refetch()
-    }, 500)
-  }
+  const handleBookmarkUpdate = () => {
+    checkBookmark()
+    refetch()
+  }

---

90-112: 리스트 아이템의 사용자 id는 서버 값을 우선 사용하세요.

현재 user.id를 userId(현재 사용자)로 채우고 있는데, 서버 item.user.id가 존재한다면 그 값을 우선 사용하는 편이 일반적입니다. 공동/관리자 조회 등에서도 안전합니다.

-        user: {
-          id: userId,
+        user: {
+          id: item.user?.id ?? userId,
           name: item.user.name,
           profileImage: item.user.profileImage,
           year: item.user.year,
           mainPosition: item.position,
         },

---

36-47: useCallback 의존성 생략 확인 필요.

fetchLikes/fetchBookmarks를 의존성에서 제외했습니다. 현 구현은 안정적일 수 있으나, 훅 구현 변경 시 스테일 클로저가 될 수 있습니다. ESLint 규칙(react-hooks/exhaustive-deps) 무시 여부/사유를 주석으로 명시하거나, 의존성을 포함해도 참조 동일성을 보장하도록 훅을 안정화하는 방안을 검토해주세요.

원하시면 useLike/useBookmark 반환 함수를 useCallback으로 감싼 안정 버전으로 리팩토링 패치를 제안드릴 수 있습니다.

Also applies to: 48-57

src/api/resume/types.ts (2)

12-27: 상세 타입에 bookmarkCount(옵셔널) 추가 고려.

UI에서 북마크 카운트를 다룰 여지가 있으므로, 서버에서 제공한다면 타입에 포함시키는 편이 좋습니다.

 export interface ResumeDetail {
   id: number
   createdAt: number
   title: string
   url: string
   category: string
   position: string
   likeCount: number
+  bookmarkCount?: number
   user: {
     id: number
     name: string
     profileImage: string
     year: number
     mainPosition: string
   }
 }

---

2-9: 정렬/필터 파라미터를 리터럴 유니온으로 제한해 계약 명확화.

sortBy/category가 서버에서 정해진 값이라면 리터럴 유니온으로 좁히는 것을 권장합니다.

 export interface ResumeQueryParams {
   position?: string[]
   year?: string[]
-  category?: string
+  category?: 'ALL' | 'INTERVIEW' | 'CS' | 'FE' | 'BE'
   cursorId?: number
   limit?: number
-  sortBy?: string
+  sortBy?: 'LATEST' | 'POPULAR'
 }

src/components/mypage/AddResume.tsx (2)

70-95: 로딩 상태는 mutation의 isPending을 사용하고, 수동 isLoading 제거 권장

useMutation이 isPending을 제공하므로 수동 setIsLoading는 중복입니다. 또한 onSuccess에서 invalidateQueries가 이미 수행되어 fetchData() 호출은 중복 가능성이 높습니다(필요 시 유지해도 되나 네트워크 중복 고려).

아래처럼 최소 변경으로 수동 로딩 제거를 제안합니다.

       try {
-      setIsLoading(true)
       setAddError('')
@@
-      console.log('이력서 생성 성공')
-      fetchData()
+      console.log('이력서 생성 성공')
+      // 필요 시 fetchData() 유지, 단 캐시 무효화로 대부분 갱신됨
       setModal(false)
     } catch (err: any) {
       console.error('이력서 생성 실패:', err)
-      setAddError(err.message || '네트워크 오류가 발생했습니다.')
-    } finally {
-      setIsLoading(false)
-    }
+      setAddError(
+        err?.response?.data?.message ??
+          err?.message ??
+          '네트워크 오류가 발생했습니다.'
+      )
+    }

추가로 버튼 비활성화/스피너는 uploadMutation.isPending으로 대체를 권장합니다(별도 수정).

---

10-10: 요청 페이로드 타입 명시로 안전성 강화

requestData를 서버 계약 타입으로 명시해 회귀를 줄입시다.

 import { useResumeUploadMutation } from '@/api/resume/mutations'
+import type { ResumeUploadRequest } from '@/api/resume/types'

-      const requestData = {
+      const requestData: ResumeUploadRequest = {
         category: formData.resumeCategory,
         position: formData.resumePosition,
         title: formData.resumeTitle,
         isMain: formData.resumeIsMain,
       }

Also applies to: 74-80

src/components/resume/OtherResume.tsx (2)

31-33: 무한 쿼리 데이터는 모든 페이지 평탄화 권장

첫 페이지만 사용하는 대신 전체 pages를 합쳐 목록을 구성하면 스크롤 확장 시 자연스럽습니다.

-  // 모든 페이지의 데이터를 평탄화하여 첫 번째 페이지만 사용
-  const otherData = data?.pages[0]?.data ?? []
+  // 모든 페이지 데이터 평탄화
+  const otherData =
+    data?.pages.flatMap((page) => page.data ?? []) ?? []

---

42-47: 에러와 빈 상태를 분리 렌더링

현재는 에러/빈 상태가 동일 메시지로 처리됩니다. 구분하면 UX가 선명해집니다.

-  if (isError || otherData.length === 0) {
+  if (isError) {
     return (
       <div className="flex flex-col w-[14.5rem] h-auto rounded-xl shadow-md mt-1">
-        <div className="p-4 text-center text-gray">이력서가 없습니다.</div>
+        <div className="p-4 text-center text-gray">목록을 불러오지 못했습니다.</div>
       </div>
     )
   }
+  if (otherData.length === 0) {
+    return (
+      <div className="flex flex-col w-[14.5rem] h-auto rounded-xl shadow-md mt-1">
+        <div className="p-4 text-center text-gray">이력서가 없습니다.</div>
+      </div>
+    )
+  }

src/components/resume/ResumeFolder.tsx (4)

35-37: 중복 클릭 방지 및 공통 낙관적 업데이트는 훅(onMutate)으로 이전 권장

• 버튼 다중 클릭 시 중복 요청/카운트 드리프트 위험이 있습니다. likeMutation.isPending/bookmarkMutation.isPending 동안 클릭을 막아주세요.
• 낙관적 업데이트/롤백은 각 컴포넌트마다 구현하지 말고, useResumeLikeMutation/useResumeBookmarkMutation의 onMutate/onError로 공통 처리하면 중복이 줄고 일관성이 올라갑니다.

예시(뮤테이션 훅 내부):

 return useMutation({
   mutationFn: (data: LikeBookmarkRequest) => postLike(data),
+  onMutate: async (vars) => {
+    await queryClient.cancelQueries({ queryKey: resumeKeys.all })
+    const prev = queryClient.getQueriesData({ queryKey: resumeKeys.all })
+    // TODO: prev를 바탕으로 낙관적 캐시 업데이트
+    return { prev }
+  },
+  onError: (_err, _vars, ctx) => {
+    // TODO: ctx.prev로 롤백
+  },
   onSuccess: () => {
     queryClient.invalidateQueries({ queryKey: resumeKeys.all })
   },
 })

---

153-169: 버튼 비활성화, aria-pressed, alt 텍스트 수정

• 진행 중 비활성화 및 접근성 속성 추가.
• 북마크 아이콘 alt가 like-on/off로 표기되어 있습니다.

-<button type="button" onClick={clickBookmark}>
+<button
+  type="button"
+  onClick={clickBookmark}
+  disabled={bookmarkMutation.isPending}
+  aria-pressed={isBookmark}
+>
@@
-  alt="like-on"
+  alt="bookmark-on"
@@
-  alt="like-off"
+  alt="bookmark-off"
@@
-<button type="button" onClick={clickLike}>
+<button
+  type="button"
+  onClick={clickLike}
+  disabled={likeMutation.isPending}
+  aria-pressed={isLike}
+>

Also applies to: 171-189

---

38-38: 미사용 로컬 상태 제거

resumes 상태는 사용되지 않습니다. 삭제하여 불필요한 리렌더 가능성을 줄이세요.

-const [resumes, setResumes] = useState<Resume[]>([])

---

8-9: 레거시 훅 및 메서드 정리

useLike/useBookmark 및 postLike/postBookmark는 더 이상 사용되지 않습니다. 정리하세요.

-import { useLike } from '@/app/blog/_lib/useLike'
-import { useBookmark } from '@/app/blog/_lib/useBookmark'
@@
-const { postLike } = useLike()
-const { postBookmark } = useBookmark()

Also applies to: 32-33

src/components/resume/BestResume.tsx (1)

32-33: 드롭다운이 닫힌 동안 불필요한 네트워크 요청 방지(옵션 enabled 지원 제안)

드롭다운이 닫힌 상태에도 최초 페이지가 즉시 fetch 됩니다. 훅에 enabled 옵션을 받아 isOpen일 때만 동작하도록 하면 UX/트래픽이 개선됩니다.

예시(훅 및 사용부 동시 변경):

-// src/api/resume/queries.ts
-export const useBestResumeListQuery = (
-  setAuthModalOpen: (open: boolean) => void,
-  limit: number = 12,
-) => {
+export const useBestResumeListQuery = (
+  setAuthModalOpen: (open: boolean) => void,
+  limit: number = 12,
+  options?: { enabled?: boolean },
+) => {
   return useInfiniteQuery({
     queryKey: resumeKeys.bestList(),
     queryFn: ({ pageParam }) =>
       fetchBestResumes(pageParam, limit, setAuthModalOpen),
     initialPageParam: undefined as number | undefined,
     getNextPageParam: (lastPage) =>
       lastPage.hasNext ? lastPage.nextCursor : undefined,
     staleTime: 5 * 60 * 1000,
     gcTime: 10 * 60 * 1000,
+    enabled: options?.enabled ?? true,
   })
 }

-const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
-  useBestResumeListQuery(setAuthModalOpen, limit)
+const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
+  useBestResumeListQuery(setAuthModalOpen, limit, { enabled: isOpen })

src/api/resume/keys.ts (2)

9-14: 객체 파라미터를 키로 직접 사용 시 정규화 필요(정렬/불변화)

ResumeQueryParams의 배열 필드(position/year)가 순서에 따라 서로 다른 키로 해석될 수 있습니다. 키 폭주/캐시 미스 방지를 위해 정규화하세요.

-export const resumeKeys = {
+const normalizeParams = (params: ResumeQueryParams) => {
+  return {
+    ...params,
+    position: params.position ? [...params.position].sort() : undefined,
+    year: params.year ? [...params.year].sort() : undefined,
+  }
+}
+
+export const resumeKeys = {
   // 이력서 목록 키
   lists: () => [...resumeKeys.all, 'list'] as const,
-  list: (params: ResumeQueryParams) => [...resumeKeys.lists(), params] as const,
+  list: (params: ResumeQueryParams) =>
+    [...resumeKeys.lists(), normalizeParams(params)] as const,
   // 페이지별 쿼리 키
   page: (params: ResumeQueryParams, pageNumber: number) =>
-    [...resumeKeys.list(params), 'page', pageNumber] as const,
+    [...resumeKeys.list(params), 'page', pageNumber] as const,

---

18-23: 키 스코프 세분화 고려(선택)

뮤테이션에서 resumeKeys.all 무효화는 광범위합니다. 영향 범위가 좁다면 detail(id) 혹은 특정 리스트 키만 무효화하도록 조정하면 불필요한 refetch를 줄일 수 있습니다.

src/api/resume/mutations.ts (2)

36-43: 업로드 성공 시 무효화 범위 축소 및 타입 제네릭 지정

업로드 후에도 전체 무효화 대신 목록/베스트 중심으로 갱신하면 충분합니다. 반환 타입이 any인 점은 추후 명세가 정해지면 제네릭으로 명시해 주세요.

-  return useMutation({
-    mutationFn: ({ file, data }: { file: File; data: ResumeUploadRequest }) =>
-      uploadResume(file, data),
-    onSuccess: () => {
-      // 이력서 업로드 성공 시 관련 쿼리 무효화
-      queryClient.invalidateQueries({ queryKey: resumeKeys.all })
-    },
-  })
+  return useMutation<unknown, Error, { file: File; data: ResumeUploadRequest }>({
+    mutationKey: [...resumeKeys.all, 'upload'],
+    mutationFn: ({ file, data }) => uploadResume(file, data),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: resumeKeys.lists() }),
+        queryClient.invalidateQueries({ queryKey: resumeKeys.bestList() }),
+      ])
+    },
+  })

---

6-17: 중복 패턴을 훅 팩토리로 축소 가능

like/bookmark 훅은 동일한 구조입니다. createToggleMutation(postFn, keySegment) 형태의 팩토리로 중복 제거하면 유지보수가 쉬워집니다.

Also applies to: 19-30

src/app/(protected)/resume/[resumeId]/page.tsx (2)

34-41: 오류 메시지 노출 개선

isError일 때 서버 메시지를 사용자에게 전달하는 편이 디버깅/UX에 유리합니다. error를 활용해 구체 메시지(가능하면 i18n)로 교체를 고려하세요.

---

121-123: ProfileBox에 불필요한 error 전달

현 구현의 ProfileBox는 loading || error면 스켈레톤을 보여 실제 에러 문구가 숨겨집니다. 이 페이지에서는 로딩 분기가 별도로 있으므로 error는 전달하지 않는 편이 깔끔합니다.

-              error={isError ? 'Error' : ''}
+              error=""

src/api/resume/queries.ts (1)

23-42: 반환 타입 제네릭 명시로 타입 안전성 강화

use(Infinite)Query에 서버 응답 타입(예: ResumeListResponse, ResumeDetail, BestResumeResponse, UserResumeResponse)을 제네릭으로 지정하면 후속 코드에서 안전합니다. apis.ts 반환 타입과 맞춰 적용해 주세요.

Also applies to: 45-54, 61-70, 75-84

src/api/resume/apis.ts (8)

52-57: GET 요청에 불필요한 Content-Type 헤더 제거

• GET에는 본문이 없으므로 Content-Type 지정이 불필요합니다. 일부 서버/프록시에서 의미 없는 헤더가 문제를 유발할 수 있습니다. 제거를 권장합니다.

-    const response = await fetch(`${RESUME_API_BASE}?${params.toString()}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
+    const response = await fetch(`${RESUME_API_BASE}?${params.toString()}`, {
+      method: 'GET',
+    })

---

77-82: 상세 조회도 동일하게 헤더 정리

• 위와 동일 사유로 GET의 Content-Type 제거를 권장합니다.

-    const response = await fetch(`${RESUME_API_BASE}/${resumeId}`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    })
+    const response = await fetch(`${RESUME_API_BASE}/${resumeId}`, {
+      method: 'GET',
+    })

---

101-105: API 레이어에서 UI 사이드이펙트(setAuthModalOpen) 제거 권고

• API 레이어가 모달 오픈을 직접 호출하면 관심사가 섞입니다. 401은 도메인 예외(AuthError)를 던지고, 호출부(쿼리 훅/컴포넌트)에서 UI를 제어하도록 분리하세요.

적용 예시(요지):

-export const fetchBestResumes = async (
-  cursorId?: number,
-  limit: number = 12,
-  setAuthModalOpen?: (open: boolean) => void,
-): Promise<BestResumeResponse> => {
+export const fetchBestResumes = async (
+  cursorId?: number,
+  limit: number = 12,
+): Promise<BestResumeResponse> => {
@@
-    if (response.status === 401) {
-      setAuthModalOpen?.(true)
-      throw new Error('로그인이 필요합니다.')
-    }
+    if (response.status === 401) {
+      throw new AuthRequiredError()
+    }

추가로 파일 상단 어딘가에 예외 클래스를 선언하세요(지원 코드):

class AuthRequiredError extends Error {
  status = 401 as const
  constructor(message = '로그인이 필요합니다.') {
    super(message)
    this.name = 'AuthRequiredError'
  }
}

Also applies to: 121-125

---

145-154: cursor 파라미터 네이밍 불일치 확인 필요(cursor vs cursorId)

• 목록/베스트는 cursorId, 사용자 목록은 cursor를 사용합니다. 백엔드 계약이 의도된 것인지 확인해 주세요. 통일 가능하면 파라미터명을 일관화하세요.

---

49-51: sortBy 허용값을 타입으로 제한

• 현재 문자열 자유 입력이라 서버 계약과 어긋날 위험이 있습니다. union 타입을 정의해 컴파일 타임에 방지하세요(예: 'CREATEDAT' | 'LIKES' 등).

타입 정의 예시(types.ts):

export type ResumeSort = 'CREATEDAT' | 'LIKES' | 'BOOKMARKS'
export interface ResumeQueryParams { /* ... */ sortBy?: ResumeSort }

---

176-194: 요청 취소(AbortSignal) 및 타임아웃 지원 제안

• 사용자가 필터를 빠르게 변경할 때 낭비되는 네트워크를 줄이기 위해 AbortSignal을 옵션으로 지원하세요. 훅에서 signal 전달이 가능해집니다.

예시(요지):

-export async function getResumeList({ ... }: ResumeQueryParams) {
+export async function getResumeList({ ... }: ResumeQueryParams, opts?: { signal?: AbortSignal }) {
@@
-    const response = await fetch(`${RESUME_API_BASE}?${params.toString()}`, {
+    const response = await fetch(`${RESUME_API_BASE}?${params.toString()}`, {
       method: 'GET',
+      signal: opts?.signal,
     })

다른 fetch 호출에도 동일 패턴을 적용해 주세요.

---

218-223: 업로드 응답 타입 명시 및 서버 메시지 전파

• 반환 타입이 any입니다. 응답 스키마를 타입으로 정의하고 사용하세요. 또한 실패 시 서버의 에러 메시지를 최대한 전파하세요.

-export const uploadResume = async (
+export const uploadResume = async (
   file: File,
   data: ResumeUploadRequest,
-): Promise<any> => {
+): Promise<UploadResumeResponse> => {
@@
-  return response.json()
+  return response.json() as Promise<UploadResumeResponse>

지원 코드(types.ts):

export interface UploadResumeResponse {
  id: number
  createdAt: number
  title: string
  url: string
  category: string
  position: string
  likeCount: number
  user: { id: number; name: string; profileImage: string; year: number; mainPosition: string }
}

Also applies to: 247-248

---

28-35: 카테고리 매핑 통합 및 불일치 수정

• UI 전역에서 ‘전체 보기’/‘전체보기’, ‘기타’, ‘OTHERS’ 등 현재 categoryMap에 누락되거나 다르게 사용되는 라벨이 다수 발견되었습니다. 공용 enum 또는 상수 파일 하나에 한글→영문 매핑을 정의하고, 모든 사용처에서 이를 참조하도록 교체하세요.

src/app/(protected)/resume/@resumeList.tsx (2)

73-83: useCallback 의존성 배열 정합성(잠재적 stale 클로저) 확인

• fetchLikes/fetchBookmarks를 캡처하면서 의존성 배열을 빈 배열로 두면 교체 시 갱신되지 않습니다. 훅이 안정된 ref를 보장하지 않는다면 deps에 포함하세요. 불가피하면 eslint-disable 대신 안정 래퍼를 제공합니다.

-  }, [])
+  }, [fetchLikes])
@@
-  }, [])
+  }, [fetchBookmarks])

Also applies to: 85-94

---

96-108: setTimeout 사용 시 언마운트 클린업 추가 권장

• 언마운트 직후 타이머 콜백이 실행되면 불필요한 refetch가 발생할 수 있습니다. timeout ref를 두고 정리하세요.

지원 코드:

const timeoutRef = useRef<NodeJS.Timeout | null>(null)

const handleLikeUpdate = (...) => {
  if (timeoutRef.current) clearTimeout(timeoutRef.current)
  timeoutRef.current = setTimeout(() => { checkLike(); refetch() }, 500)
}

useEffect(() => () => { if (timeoutRef.current) clearTimeout(timeoutRef.current) }, [])

또는, TanStack Query의 뮤테이션 onSuccess에서 invalidate를 호출해 타이머를 제거하는 방식을 고려해 주세요.

Also applies to: 110-115

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/app/(protected)/resume/@resumeList.tsx (1)

56-71: 컨버터(변환기)에서 타입 정규화 누락: id/createdAt/year/user.id 안전 캐스팅 필요

API 응답이 string/number 혼재일 수 있어 현재 타입(Resume)과 불일치 위험이 큽니다. 아래처럼 안전 캐스팅과 기본값을 적용하세요.

-  const convertToResume = (item: any): Resume => ({
-    id: item.id,
-    createdAt: item.createdAt,
-    title: item.title,
-    category: item.category,
-    position: item.position,
-    likeCount: item.likeCount,
-    year: item.year,
-    user: {
-      id: item.user.id,
-      name: item.user.name,
-      profileImage: item.user.profileImage,
-      year: item.user.year,
-      mainPosition: item.user.mainPosition,
-    },
-  })
+  const convertToResume = (item: any): Resume => ({
+    id: String(item?.id),
+    createdAt:
+      typeof item?.createdAt === 'number'
+        ? item.createdAt
+        : new Date(item?.createdAt).getTime(),
+    title: String(item?.title ?? ''),
+    category: String(item?.category ?? ''),
+    position: String(item?.position ?? ''),
+    likeCount: Number(item?.likeCount ?? 0),
+    year: String(item?.year ?? ''),
+    user: {
+      id: Number(item?.user?.id),
+      name: String(item?.user?.name ?? ''),
+      profileImage: String(item?.user?.profileImage ?? ''),
+      year: Number(item?.user?.year ?? 0),
+      mainPosition: String(item?.user?.mainPosition ?? ''),
+    },
+  })

src/app/(protected)/resume/@resumeList.tsx (4)

96-108: setTimeout 기반 refetch: 언마운트 시 메모리 누수/중복 호출 위험

타이머를 ref로 관리하고 언마운트 클린업을 추가하세요. 가능하면 뮤테이션 측 onSuccess에서 invalidate/refetch를 트리거하는 구조로 이동을 권장합니다.

   const handleLikeUpdate = (resumeId: string, newLikeCount: number) => {
-    setTimeout(() => {
-      checkLike()
-      refetch()
-    }, 500)
+    if (likeTimerRef.current) clearTimeout(likeTimerRef.current)
+    likeTimerRef.current = window.setTimeout(() => {
+      checkLike()
+      refetch()
+    }, 500)
   }

   const handleBookmarkUpdate = (resumeId: string, newBookmarkCount: number) => {
-    setTimeout(() => {
-      checkBookmark()
-      refetch()
-    }, 500)
+    if (bookmarkTimerRef.current) clearTimeout(bookmarkTimerRef.current)
+    bookmarkTimerRef.current = window.setTimeout(() => {
+      checkBookmark()
+      refetch()
+    }, 500)
   }
+
+  useEffect(() => {
+    return () => {
+      if (likeTimerRef.current) clearTimeout(likeTimerRef.current)
+      if (bookmarkTimerRef.current) clearTimeout(bookmarkTimerRef.current)
+    }
+  }, [])

추가 임포트/레퍼런스:

- import { useEffect, useState, useCallback } from 'react'
+ import { useEffect, useState, useCallback, useRef } from 'react'

const likeTimerRef = useRef<number | null>(null)
const bookmarkTimerRef = useRef<number | null>(null)

---

123-124: 큰 데이터에서 불필요한 평탄화 재계산 방지: useMemo 적용 권장

렌더마다 flatMap 비용이 발생합니다. data 변경시에만 계산되도록 메모이제이션하세요.

-  const resumes =
-    data?.pages.flatMap((page) => page.data.map(convertToResume)) ?? []
+  const resumes = useMemo(
+    () => data?.pages.flatMap((page) => page.data.map(convertToResume)) ?? [],
+    [data],
+  )

임포트:

- import { useEffect, useState, useCallback } from 'react'
+ import { useEffect, useState, useCallback, useMemo } from 'react'

---

136-144: 에러 상태와 빈 목록 상태 분리 렌더링

현재 둘을 합쳐 처리해 에러 시 기존 데이터가 있어도 빈 화면이 나올 수 있습니다. 분리해 사용자 메시지를 명확히 하세요.

-  if (isError || (!isLoading && resumes.length === 0)) {
-    return (
-      <div className="flex justify-center">
-        <EmptyAnimation
-          text="이력서 데이터가 없습니다."
-          text2="다시 조회해주세요"
-        />
-      </div>
-    )
-  }
+  if (isError) {
+    return (
+      <div className="flex justify-center">
+        <EmptyAnimation text="이력서 목록을 불러오지 못했습니다." text2="잠시 후 다시 시도해주세요" />
+      </div>
+    )
+  }
+  if (!isLoading && resumes.length === 0) {
+    return (
+      <div className="flex justify-center">
+        <EmptyAnimation text="이력서 데이터가 없습니다." text2="필터를 변경하거나 다시 조회해주세요" />
+      </div>
+    )
+  }

---

11-26: Resume 타입 중복 정의: 공용 타입으로 이동

동일/유사 타입이 여러 컴포넌트에 산재하면 유지보수 비용이 큽니다. src/api/resume/types(또는 전역 @/types)로 이동해 단일 소스로 관리하세요. convertToResume도 API 어댑터 레이어로 옮기면 재사용이 용이합니다.

src/app/(protected)/resume/[resumeId]/page.tsx (6)

12-14: URL 파라미터 가드: NaN/비양수 ID 대응 및 쿼리키 안정화

Number(resumeId)가 NaN/0이면 enabled가 false라 호출은 막히지만, 쿼리키에 NaN이 들어가면 캐시 키가 불안정해질 수 있습니다. 초기에 유효성 검사 값을 만들어 두고, 훅 인자로도 동일 값을 넘기면 관리가 수월합니다. invalid이면 즉시 사용자 피드백을 반환하는 게 UX에도 좋습니다.

 export default function Detail() {
-  const { resumeId } = useParams() as { resumeId: string }
+  const { resumeId } = useParams() as { resumeId: string }
+  const id = Number(resumeId)
+  const isValidId = Number.isFinite(id) && id > 0
@@
-  } = useResumeDetailQuery(Number(resumeId))
+  } = useResumeDetailQuery(id)
+
+  if (!isValidId) {
+    return (
+      <div className="w-[55.625rem] text-center text-gray">
+        유효하지 않은 이력서 ID입니다.
+      </div>
+    )
+  }

Also applies to: 18-24, 25-25

---

33-39: 에러 처리 조건 수정: stale 데이터가 있으면 우선 렌더링

캐시에 유효 데이터가 있는데 최신 요청이 실패한 경우 isError || !resume는 에러 화면을 보여줍니다. stale-while-revalidate UX를 살리려면 데이터가 없을 때만 에러로 처리하세요.

-    if (isError || !resume) {
+    if (isError && !resume) {

---

42-55: Google Drive 링크 파싱 보강 필요

현 로직은 /d/ 패턴만 지원합니다. open?id=... 등 다른 드라이브 링크 포맷이 오면 오탐/미탐이 납니다. URL 기반 파싱과 예외 처리로 보강을 권장합니다.

-    if (!resume.url || !resume.url.includes('/d/')) {
-      // url이 없거나 Drive 링크 아님
-      return (
-        <div className="w-[55.625rem] text-center text-gray">
-          등록된 이력서가 없습니다.
-        </div>
-      )
-    }
-
-    // 정상 데이터
-    const driveId = resume.url.split('/d/')[1].split('/')[0]
+    if (!resume.url) {
+      return (
+        <div className="w-[55.625rem] text-center text-gray">
+          등록된 이력서가 없습니다.
+        </div>
+      )
+    }
+    // Drive 링크 파싱 (file/d/{id} 또는 open?id={id})
+    let driveId: string | null = null
+    try {
+      const u = new URL(resume.url)
+      const isDrive = u.hostname.includes('drive.google.com')
+      const match = u.pathname.match(/\/d\/([^/]+)/)
+      driveId = match?.[1] ?? u.searchParams.get('id')
+      if (!isDrive || !driveId) {
+        return (
+          <div className="w-[55.625rem] text-center text-gray">
+            등록된 이력서가 없습니다.
+          </div>
+        )
+      }
+    } catch {
+      return (
+        <div className="w-[55.625rem] text-center text-gray">
+          등록된 이력서가 없습니다.
+        </div>
+      )
+    }

Also applies to: 51-55

---

61-67: iframe 소소한 개선: 지연 로딩·리퍼러 최소화

초기 페인트/네트워크 절약과 프라이버시 보호를 위해 속성 추가를 권장합니다.

-            <iframe
+            <iframe
               src={pdfPreviewUrl}
               width="100%"
               height="100%"
               frameBorder="0"
               title="Resume PDF"
-            ></iframe>
+              loading="lazy"
+              referrerPolicy="no-referrer"
+            />

---

104-122: ProfileBox 로딩/에러 전달 정밀화 및 메시지 표출

초기 로딩 이외의 백그라운드 refetch에서는 스켈레톤을 숨기고, 에러는 메시지로 전달하면 좌측 박스 UX가 개선됩니다.

-              loading={isLoading}
-              error={isError ? 'Error' : ''}
+              loading={isLoading && !resume}
+              error={
+                isError && !resume
+                  ? (error instanceof Error ? error.message : '오류가 발생했습니다.')
+                  : ''
+              }

---

104-119: PII 마스킹은 컴포넌트가 아닌 데이터 계층에서 일괄 처리 권장

email/학교/블로그 URL 등을 화면단에서 공백으로 덮는 방식은 누락/회귀 위험이 큽니다. 서버 응답 스키마 수준(또는 React Query의 select 트랜스포머)에서 PII 제거/마스킹을 일괄 적용해 중복과 실수를 줄이세요.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/app/(protected)/resume/[resumeId]/page.tsx (8)

12-14: resumeId 파싱/검증 추가로 NaN·비정상 값 방지

useParams는 string | string[] 가능성이 있어 Number(resumeId)로 바로 변환 시 NaN이 나올 수 있습니다. 안전 파싱 후 훅에 전달하고, 잘못된 ID는 조기 반환하는 편이 명확합니다.

적용 제안(diff):

 export default function Detail() {
-  const { resumeId } = useParams() as { resumeId: string }
+  const params = useParams()
+  const rawResumeId = Array.isArray((params as any)?.resumeId)
+    ? (params as any).resumeId[0]
+    : (params as any)?.resumeId
+  const parsedResumeId = Number.parseInt(rawResumeId ?? '', 10)

그리고 Line 24의 훅 호출도 아래와 같이 교체:

-  } = useResumeDetailQuery(Number(resumeId))
+  } = useResumeDetailQuery(parsedResumeId)

---

18-25: 쿼리 error 미사용 및 메시지 손실 — 의미 있는 에러 전달

error를 구조분해만 하고 실제 UI에는 'Error' 리터럴을 넘겨 상세 메시지를 잃고 있습니다. 실제 에러 메시지를 안전하게 추출해 재사용하세요.

적용 제안(diff):

   const {
     data: resume,
     isLoading,
     isError,
-    error,
+    error: queryError,
   } = useResumeDetailQuery(parsedResumeId)
+
+  const errorMessage =
+    isError
+      ? (queryError instanceof Error
+          ? queryError.message
+          : '이력서를 불러오는 중 오류가 발생했습니다.')
+      : ''

---

31-39: 오류 렌더링 시 실제 메시지 노출

위에서 만든 errorMessage를 사용하여 사용자에게 구체적인 오류 원인을 보여주는 편이 UX에 좋습니다.

적용 제안(diff):

-    if (isError || !resume) {
+    if (isError || !resume) {
       // 에러 상태 or resume가 null
       return (
         <div className="w-[55.625rem] text-center text-gray">
-          이력서를 불러오는 중 오류가 발생했습니다.
+          {errorMessage || '이력서를 불러오는 중 오류가 발생했습니다.'}
         </div>
       )
     }

---

42-55: Google Drive 링크 감지/파싱 로직 보강

'/d/' 패턴만 처리하면 open?id=, uc?id= 형태를 놓칩니다. 공용 정규식으로 id를 추출하고, 실패 시 사용자 메시지를 명확히 하세요.

적용 제안(diff):

-    if (!resume.url || !resume.url.includes('/d/')) {
-      // url이 없거나 Drive 링크 아님
-      return (
-        <div className="w-[55.625rem] text-center text-gray">
-          등록된 이력서가 없습니다.
-        </div>
-      )
-    }
-
-    // 정상 데이터
-    const driveId = resume.url.split('/d/')[1].split('/')[0]
+    if (!resume.url) {
+      return (
+        <div className="w-[55.625rem] text-center text-gray">등록된 이력서가 없습니다.</div>
+      )
+    }
+    const driveId = extractDriveId(resume.url)
+    if (!driveId) {
+      return (
+        <div className="w-[55.625rem] text-center text-gray">
+          지원하지 않는 이력서 링크 형식입니다. Google Drive 공유 링크를 등록해주세요.
+        </div>
+      )
+    }
     const pdfPreviewUrl = `https://drive.google.com/file/d/${driveId}/preview`
     const pdfDownloadUrl = `https://drive.google.com/uc?export=download&id=${driveId}`

헬퍼 함수(컴포넌트 바깥에 추가):

function extractDriveId(url: string): string | null {
  const byPath = url.match(/\/d\/([a-zA-Z0-9_-]+)/)?.[1]
  if (byPath) return byPath
  const byQuery = url.match(/[?&]id=([a-zA-Z0-9_-]+)/)?.[1]
  return byQuery || null
}

---

58-65: iframe 보안/성능 옵션 고려

외부 도메인 임베드이므로 sandbox/allow/referrerPolicy/loading 등을 검토하세요. Drive Viewer 제약으로 전부 적용은 어려울 수 있으나 최소한 loading="lazy"와 referrerPolicy는 무난합니다.

적용 제안(diff):

-            <iframe
+            <iframe
               src={pdfPreviewUrl}
               width="100%"
               height="100%"
               frameBorder="0"
               title="Resume PDF"
+              loading="lazy"
+              referrerPolicy="no-referrer"
             ></iframe>

---

103-121: ProfileBox에 전달하는 profile 필드 정제 방식과 타입 확인

• 불필요한 필드(isLft)가 보입니다. 오타(isLeft?) 또는 미사용 필드라면 제거하세요.
• 민감정보 블랭크 처리 자체는 OK. 다만 ProfileBox의 요구 스키마에 맞춰 최소 필드만 명시하는 편이 안전합니다(초과 속성으로 인한 Excess Property 체크 회피).

적용 제안(diff):

                   ? {
                       ...resume.user,
                       email: '',
                       school: '',
                       grade: '',
                       subPosition: '',
                       githubUrl: '',
                       mediumUrl: '',
                       velogUrl: '',
                       tistoryUrl: '',
-                      isLft: false,
                     }
                   : undefined

원하시면 Profile 타입에 맞춘 안전 매퍼 함수를 추가해 드릴게요.

---

121-123: ProfileBox error prop에 실제 메시지 전달

현재 'Error' 리터럴은 UX가 떨어지고, ProfileBox 내부 로직에 따라 스켈레톤만 보일 수 있습니다. 위에서 만든 errorMessage를 그대로 넘기는 편이 낫습니다.

적용 제안(diff):

-              error={isError ? 'Error' : ''}
+              error={errorMessage}

참고: ProfileBox.tsx는 if (loading || error) return <SkeletonProfileBox /> 다음 줄에 if (error)가 있어 에러 메시지가 사실상 노출되지 않습니다. 해당 컴포넌트 로직도 함께 정리 필요합니다.

---

58-60: 높이 값 불일치로 인한 오버플로 가능성

우측 컨테이너 h-[50rem]인데 내부 PDF 래퍼가 h-[55rem]라 스크롤/잘림이 의도치 않게 발생할 수 있습니다. 동일 값으로 맞추거나 overflow 컨트롤을 명시하세요.

Also applies to: 96-101

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/components/resume/ResumeFolder.tsx (1)

39-40: bookmarkCount 초기화 버그

bookmarkCount가 initialLikeCount로 초기화되어 잘못된 북마크 수를 표시합니다. mypage/ResumeFolder.tsx와 동일한 문제입니다.

   const [likeCount, setLikeCount] = useState(initialLikeCount)
-  const [bookmarkCount, setBookmarkCount] = useState(initialLikeCount)
+  const [bookmarkCount, setBookmarkCount] = useState(0)

src/components/mypage/Resume.tsx (1)

17-18: likeList/bookmarkList 타입 개선 필요

현재 string[]로 선언되어 있지만, 실제로는 { id: number | string } 형태의 객체 배열로 사용됩니다 (예: bookmark.id 접근). 타입을 정확히 명시해야 합니다.

-  const [bookmarkList, setBookmarkList] = useState<string[]>([])
-  const [likeList, setLikeList] = useState<string[]>([])
+  const [bookmarkList, setBookmarkList] = useState<Array<{ id: number | string }>>([])
+  const [likeList, setLikeList] = useState<Array<{ id: number | string }>>([])

src/components/mypage/ResumeFolder.tsx (1)

37-38: bookmarkCount 초기화 버그

bookmarkCount가 initialLikeCount로 초기화되어 있어 북마크 수가 좋아요 수로 표시됩니다. 서버에서 북마크 카운트를 제공하는 경우 해당 값을 사용하고, 그렇지 않으면 0으로 초기화해야 합니다.

   const [likeCount, setLikeCount] = useState(initialLikeCount)
-  const [bookmarkCount, setBookmarkCount] = useState(initialLikeCount)
+  const [bookmarkCount, setBookmarkCount] = useState(0) // 또는 서버 제공 값 사용

src/app/(protected)/resume/@resumeList.tsx (1)

35-36: likeList/bookmarkList 구조 불일치로 인한 런타임 오류 가능 + useCallback 의존성 보완 필요

현재 상태:

• likeList, bookmarkList가 string[]로 관리되고,
• checkLike, checkBookmark에서 setLikeList(data), setBookmarkList(data)로 그대로 넣고 있습니다.
• 하지만 ResumeFolder에서는 likeList.some((bookmark) => String(bookmark.id) === String(resume.id)) 형태로 bookmark.id에 접근하므로, 배열 원소가 문자열이면 런타임 에러가 발생할 수 있습니다. (이전에 이미 지적되었던 부분과 동일 이슈입니다.)

또한:

• checkLike, checkBookmark는 useCallback의 deps 배열이 []라 fetchLikes, fetchBookmarks 레퍼런스가 바뀌어도 콜백이 갱신되지 않습니다.

권장 수정:

1. 상태 타입을 { id: string }[]로 변경 + normalize 적용

-  const [likeList, setLikeList] = useState<string[]>([])
-  const [bookmarkList, setBookmarkList] = useState<string[]>([])
+  const [likeList, setLikeList] = useState<{ id: string }[]>([])
+  const [bookmarkList, setBookmarkList] = useState<{ id: string }[]>([])

-  const checkLike = useCallback(async () => {
+  const checkLike = useCallback(async () => {
     try {
       const data = await fetchLikes('RESUME', 0, 50)
-      setLikeList(data)
+      const normalized = Array.isArray(data)
+        ? data.map((v: any) => ({ id: String(v?.id ?? v) }))
+        : []
+      setLikeList(normalized)
       return data
     } catch (err) {
       console.error(err)
       return []
     }
-  }, [])
+  }, [fetchLikes])

-  const checkBookmark = useCallback(async () => {
+  const checkBookmark = useCallback(async () => {
     try {
       const data = await fetchBookmarks('RESUME', 0, 50)
-      setBookmarkList(data)
+      const normalized = Array.isArray(data)
+        ? data.map((v: any) => ({ id: String(v?.id ?? v) }))
+        : []
+      setBookmarkList(normalized)
       return data
     } catch (err) {
       console.error(err)
       return []
     }
-  }, [])
+  }, [fetchBookmarks])

이렇게 하면 ResumeFolder에서 기대하는 { id: string }[] 형태와 일치하고, fetchLikes/fetchBookmarks 레퍼런스 변경에도 안전해집니다. (이전 리뷰 코멘트에서 제안된 내용과 동일 성격입니다.)

Also applies to: 73-94

src/components/resume/OtherResume.tsx (1)

17-21: 미사용 offset prop 제거 권장

OtherResumeProps 인터페이스에 offset이 정의되어 있지만 컴포넌트 내에서 사용되지 않습니다. 불필요한 prop은 제거하는 것이 좋습니다.

 interface OtherResumeProps {
   id: number
-  offset: number
   limit: number
 }

-export default function OtherResume({ id, offset, limit }: OtherResumeProps) {
+export default function OtherResume({ id, limit }: OtherResumeProps) {

src/api/resume/mutations.ts (1)

29-36: 업로드 뮤테이션에 제네릭 추가 권장

useResumeBookmarkMutation과 일관성을 위해 useResumeUploadMutation에도 제네릭 타입을 명시하는 것이 좋습니다. 타입 안전성과 디버깅 가독성이 향상됩니다.

-  return useMutation({
-    mutationFn: ({ file, data }: { file: File; data: ResumeUploadRequest }) =>
-      uploadResume(file, data),
+  return useMutation<unknown, Error, { file: File; data: ResumeUploadRequest }>({
+    mutationKey: [...resumeKeys.all, 'upload'],
+    mutationFn: ({ file, data }) => uploadResume(file, data),
     onSuccess: () => {

src/components/mypage/ResumeFolder.tsx (1)

29-30: 미사용 postBookmark import 제거

useBookmark에서 가져온 postBookmark가 bookmarkMutation으로 대체되었으므로 더 이상 사용되지 않습니다.

   const { postLike } = useLike()
-  const { postBookmark } = useBookmark()

useBookmark import 자체도 제거할 수 있습니다.

src/components/resume/ResumeFolder.tsx (1)

29-34: 미사용 코드 제거

postBookmark와 resumes 상태가 사용되지 않습니다.

   const { postLike } = useLike()
-  const { postBookmark } = useBookmark()
-
-  const bookmarkMutation = useResumeBookmarkMutation()
-
-  const [resumes, setResumes] = useState<Resume[]>([])
+  const bookmarkMutation = useResumeBookmarkMutation()

useBookmark import도 함께 제거할 수 있습니다.

src/api/resume/queries.ts (2)

28-38: 부정 조건문을 긍정 조건문으로 변경

SonarCloud 경고대로, !pageParam 대신 긍정 조건문을 사용하면 가독성이 향상됩니다.

     queryFn: ({ pageParam }) => {
-      // 첫 페이지는 initialLimit, 이후 페이지는 pageLimit
-      const limit = !pageParam ? initialLimit : pageLimit
+      // 첫 페이지는 initialLimit, 이후 페이지는 pageLimit
+      const limit = pageParam ? pageLimit : initialLimit
       return getResumeList({

---

60-74: queryFn 내 사이드 이펙트 분리 권장

setAuthModalOpen을 queryFn에 전달하여 401 응답 시 모달을 여는 것은 쿼리 함수의 순수성을 해칩니다. onError 콜백에서 인증 오류를 처리하는 것이 더 적절합니다.

 export const useBestResumeListQuery = (
-  setAuthModalOpen: (open: boolean) => void,
   limit: number = 12,
 ) => {
   return useInfiniteQuery({
     queryKey: [...resumeKeys.bestList(), limit],
-    queryFn: ({ pageParam }) =>
-      fetchBestResumes(pageParam, limit, setAuthModalOpen),
+    queryFn: ({ pageParam }) => fetchBestResumes(pageParam, limit),
     initialPageParam: undefined as number | undefined,
     getNextPageParam: (lastPage) =>
       lastPage.hasNext ? lastPage.nextCursor : undefined,
     staleTime: 5 * 60 * 1000,
     gcTime: 10 * 60 * 1000,
+    meta: { requiresAuth: true }, // 호출 측에서 에러 핸들링
   })
 }

이 변경은 fetchBestResumes API 함수도 함께 수정해야 합니다.

src/components/mypage/Resume.tsx (2)

60-72: setTimeout 대신 뮤테이션 완료 후 refetch 권장

500ms 지연은 임의의 값이며 네트워크 상황에 따라 데이터가 동기화되지 않을 수 있습니다. 좋아요/북마크 뮤테이션 훅의 onSuccess에서 refetch를 트리거하거나, 부모 컴포넌트에서 뮤테이션 완료를 기다리는 것이 더 안정적입니다.

   const handleLikeUpdate = (resumeId: string, newLikeCount: number) => {
-    setTimeout(() => {
-      checkLike()
-      refetch()
-    }, 500)
+    checkLike()
+    // 뮤테이션 훅의 onSuccess에서 이미 쿼리 무효화가 처리됨
   }

---

91-112: 데이터 변환 메모이제이션 권장

resumes 배열 변환이 매 렌더링마다 실행됩니다. useMemo를 사용하여 data가 변경될 때만 재계산하도록 최적화하세요.

+import { useCallback, useEffect, useMemo, useState } from 'react'

-  // 모든 페이지의 데이터를 평탄화하고 타입 변환
-  const resumes =
-    data?.pages.flatMap((page) =>
+  // 모든 페이지의 데이터를 평탄화하고 타입 변환
+  const resumes = useMemo(() =>
+    data?.pages.flatMap((page) =>
       page.data.map((item) => ({
         // ... mapping logic
       })),
-    ) ?? []
+    ) ?? [],
+    [data?.pages, userId]
+  )

src/api/resume/apis.ts (2)

12-70: 불필요한 try/catch 제거로 Sonar 경고 및 보일러플레이트 줄이기 제안

getResumeList, fetchResumeById, fetchBestResumes, fetchUserResumes 모두 try { ... } catch (error) { throw error } 패턴이라 예외 전파 동작은 동일하지만 코드만 길어지고 Sonar 경고가 발생합니다.

각 함수에서 특별한 정리/로깅이 없다면 try/catch를 제거하고, 내부에서 response.ok 체크 후 바로 throw하는 형태로 단순화하는 것을 권장합니다.

-export async function getResumeList(...) {
-  try {
-    ...
-    const result = await response.json()
-    return result
-  } catch (error) {
-    throw error // 에러를 호출한 함수에 다시 전달
-  }
-}
+export async function getResumeList(...) {
+  ...
+  if (!response.ok) {
+    throw new Error(
+      `Error: 이력서 목록 조회 실패: ${response.status} ${response.statusText}`,
+    )
+  }
+  return response.json()
+}

아래 다른 fetch 함수들도 동일한 방식으로 정리하면 가독성과 정적 분석 품질이 좋아집니다.

Also applies to: 72-95, 97-136, 138-174

---

152-154: fetchUserResumes의 nested 템플릿 리터럴 단순화

url 생성 시 중첩 템플릿 리터럴을 사용하고 있어 Sonar 경고가 발생하는 부분입니다. 한 번 base URL을 만든 뒤 조건부로 쿼리스트링을 붙이면 더 읽기 쉽고 경고도 사라집니다.

-    const queryString = params.toString()
-    const url = `${RESUME_API_BASE}/user/${userId}${queryString ? `?${queryString}` : ''}`
+    const queryString = params.toString()
+    const baseUrl = `${RESUME_API_BASE}/user/${userId}`
+    const url = queryString ? `${baseUrl}?${queryString}` : baseUrl

동작은 동일하면서 의도도 더 명확해집니다.

src/app/(protected)/resume/@resumeList.tsx (2)

56-71: convertToResume 정규화 보완 (createdAt/year 기본값 처리)

기본적인 정규화는 잘 되어 있지만, 몇 가지 수정을 하면 안전성이 조금 더 올라갑니다.

• createdAt이 이미 number일 수도 있어서, 타입이 섞여 들어올 경우를 대비해 한 번 분기해두면 불필요한 Date 생성이 줄어듭니다.
• year가 undefined/null일 때 String(item.year)는 'undefined'/'null'이 되어 UI에 그대로 노출될 수 있습니다.

예시:

-  const convertToResume = (item: any): Resume => ({
-    id: String(item.id),
-    createdAt: new Date(item.createdAt).getTime(),
+  const convertToResume = (item: any): Resume => ({
+    id: String(item.id),
+    createdAt:
+      typeof item.createdAt === 'number'
+        ? item.createdAt
+        : new Date(item.createdAt).getTime(),
     title: item.title,
     category: item.category,
     position: item.position,
     likeCount: item.likeCount,
-    year: String(item.year),
+    year: String(item.year ?? ''),

백엔드 응답이 항상 완전하다면 필수는 아니지만, 방어적으로 처리해두면 예외 상황에서 UI가 좀 더 안전해집니다.

---

96-108: handleLikeUpdate/handleBookmarkUpdate의 setTimeout 및 미사용 파라미터 정리 제안

handleLikeUpdate, handleBookmarkUpdate가 (resumeId, newLikeCount/newBookmarkCount)를 인자로 받지만 내부에서는 사용하지 않고, 500ms setTimeout 후 checkLike + refetch만 호출하고 있습니다.

• 파라미터를 사용하지 않을 거라면 제거하거나, _ prefix로 의도적으로 미사용임을 표시하면 가독성이 좋아집니다.
• 서버 반영 타이밍을 기다리려는 목적이라면, 해당 뮤테이션 훅(useResumeLikeMutation/useResumeBookmarkMutation)의 onSuccess에서 refetch를 호출하는 쪽이 로직 위치상 더 자연스럽고, 매직 넘버(500ms)를 없앨 수 있습니다.

예를 들어 이 컴포넌트에서는 단순히 콜백 시그니처만 맞추고, 내부에서는 바로 checkLike()/refetch()를 호출하도록 변경할 수 있습니다.

-  const handleLikeUpdate = (resumeId: string, newLikeCount: number) => {
-    setTimeout(() => {
-      checkLike()
-      refetch()
-    }, 500)
-  }
+  const handleLikeUpdate = () => {
+    checkLike()
+    refetch()
+  }

Bookmark도 동일하게 정리하면 됩니다.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: Ye0ngjun
Repo: Techeer-Hogwarts/frontend PR: 68
File: src/hooks/search/useSearchResults.ts:4-17
Timestamp: 2025-03-30T06:39:04.042Z
Learning: In TypeScript development for the frontend project, avoid using 'any' type and prefer defining specific interfaces or types for better type safety and code completion. For search results, a SearchResultItem interface with at least id and title properties should be used instead of any[].

src/hooks/resume/useResumeLikeBookmark.ts (2)

21-21: bookmarkCount가 여전히 잘못된 값으로 초기화되고 있습니다.

북마크 카운트를 좋아요 카운트(initialLikeCount)로 초기화하면 즉시 잘못된 수치가 표시됩니다. 별도의 초기값을 사용하거나 서버에서 북마크 카운트를 제공하는 경우 해당 값을 사용해야 합니다.

다음 diff를 적용하여 수정하세요:

 const [likeCount, setLikeCount] = useState(initialLikeCount)
-const [bookmarkCount, setBookmarkCount] = useState(initialLikeCount)
+const [bookmarkCount, setBookmarkCount] = useState(0) // 서버에서 제공 시 해당 값으로 대체

---

78-78: onBookmarkUpdate 호출 전 타입 체크가 필요합니다.

onLikeUpdate는 typeof 가드가 있지만(line 51), onBookmarkUpdate는 가드 없이 직접 호출됩니다. 일관성을 위해 동일한 패턴을 적용하세요.

-    onBookmarkUpdate(resume.id, newBookmarkCount)
+    if (typeof onBookmarkUpdate === 'function') {
+      onBookmarkUpdate(resume.id, newBookmarkCount)
+    }

src/hooks/resume/useResumeLikeBookmark.ts (1)

27-27: likeList 콜백의 변수명이 혼란스럽습니다.

Line 27에서 likeList.some()의 콜백 파라미터명이 bookmark로 되어 있어 가독성이 떨어집니다. like로 변경하는 것이 명확합니다.

 setIsLike(
   likeList.some(
-    (bookmark: any) => String(bookmark.id) === String(resume.id),
+    (like: any) => String(like.id) === String(resume.id),
   ),
 )

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro